<template>
	<div class="order">
		<cl-crud @load="onLoad">
			<template #slot-layout-top>
				<commission-count ref="commission-count"></commission-count>
			</template>
			<template #slot-datepicker>
				<div class="_top-filter">
					<div style="width:125px;">
						<el-select
							size="mini"
							class="time-type"
							v-model="selects.timeType"
							@change="val => refresh({ timeType: val, page: 1, sort: 'desc' })"
						>
							<el-option label="创建时间" :value="0"></el-option>
							<el-option label="付款时间" :value="1"></el-option>
							<el-option label="结算时间" :value="2"></el-option>
						</el-select>
					</div>
					<div style="width:350px;">
						<date-picker
							style="width:350px;"
							:datas="datas"
							@change="
								val => refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div style="width:125px;margin-left:10px">
						<el-select
							size="mini"
							class="selects"
							v-model="selects.tkStatus"
							@change="val => refresh({ tkStatus: val, page: 1 })"
						>
							<el-option label="订单状态" value></el-option>
							<el-option label="订单结算" :value="3"></el-option>
							<el-option label="订单付款" :value="12"></el-option>
							<el-option label="订单失效" :value="13"></el-option>
						</el-select>
					</div>
					<div>
						<select-taobao
							class="selects"
							v-model="selects.pid"
							@change="val => taobaoIdrefresh({ taobaoId: val, page: 1 })"
						></select-taobao>
					</div>
					<div>
						<select-adzone
							class="selects"
							ref="promotion"
							v-model="selects.positionId"
							@change="val => refresh({ positionId: val, page: 1 })"
						></select-adzone>
					</div>
					<!--					<div>-->
					<!--						<select-staff-->
					<!--							class="selects"-->
					<!--							v-model="selects.staffId"-->
					<!--							@change="val => refresh({ staffId: val, page: 1 })"-->
					<!--						></select-staff>-->
					<!--					</div>-->
					<el-button
						@click="orderExport"
						v-permission="$service.order.permission.orderExport"
						type="primary"
						style="margin-left:10px"
						size="mini"
					>
						<i class="el-icon-download"></i>导出报表
					</el-button>
				</div>
			</template>
			<template #table-column-salesRate="{scope}">
				<div :class="scope.row.salesStatus == 1 ? 'sales-top' : 'sales-bottom'">
					<span>{{ scope.row.salesRate }}%</span>
					<i class="el-icon-bottom" v-if="!scope.row.salesStatus"></i>
					<i class="el-icon-top" v-else></i>
				</div>
			</template>

			<template #table-column-itemTitle="{scope}">
				<goodsTitle
					@openWindow="openWindow"
					@showdetail="val => $emit('showdetail', { ...params, ...val })"
					:data="scope.row"
				></goodsTitle>
			</template>

			<template #table-column-tkStatus="{scope}">
				<el-tag size="small" type="warning" v-if="scope.row.tkStatus == 3">订单结算</el-tag>
				<el-tag size="small" v-if="scope.row.tkStatus == 12">订单付款</el-tag>
				<el-tag size="small" type="info" v-if="scope.row.tkStatus == 13">订单失效</el-tag>
				<el-tag size="small" type="success" v-if="scope.row.tkStatus == 14"
					>订单成功</el-tag
				>
			</template>
			<!-- 订单编号 -->
			<template #table-column-tradeParentId="{ scope }">
				<span>{{ scope.row.tradeParentId }}</span>
				<i
					class="el-icon-copy-document"
					v-copy="scope.row.tradeParentId"
					title="复制订单编号"
				></i>
			</template>
		</cl-crud>
	</div>
</template>
<script>
import commissionCount from './commission-count.vue';
import DatePicker from '@/components/order/date-picker';
import GoodsTitle from '@/components/order/goods-title';
import SelectTaobao from '@/components/order/select-taobao';
import SelectAdzone from './select-adzone';
// import SelectStaff from '@/components/order/select-staff';
import { dateFormat, download } from '@/utils/index';
import moment from 'moment';
export default {
	data() {
		return {
			crud: null,
			selects: {
				timeType: 0,
				pid: '',
				positionId: '',
				staffId: '',
				tkStatus: ''
			},
			datas: [this.$route.query.startTime, this.$route.query.endTime],
			params: {
				timeType: 0,
				sort: 'desc', // 排序类型
				prop: 'tkCreateTime', // 根据这个字段进行排序
				startTime: this.$route.query.startTime,
				endTime: this.$route.query.endTime
			}
		};
	},
	components: {
		commissionCount,
		DatePicker,
		GoodsTitle,
		SelectTaobao,
		SelectAdzone
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.order)
				.set('dict', {
					api: {
						list: 'list', // 全部数据
						add: 'add', // 新增
						update: 'update', // 修改
						delete: 'delete', // 删除
						info: 'info', // 详情
						page: 'orderList' // 分页
					},
					search: {
						query: 'salesStatus'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							label: '序号',
							width: 80
						},
						{
							label: '商品ID',
							prop: 'itemId',
							align: 'center',
							minWidth: 140
						},
						{
							label: '商品标题',
							prop: 'itemTitle',
							align: 'center',
							minWidth: 600
						},
						{
							label: '订单编号',
							prop: 'tradeParentId',
							align: 'center',
							minWidth: 200
						},
						{
							label: '订单状态',
							prop: 'tkStatus',
							align: 'center',
							minWidth: 140
						},
						{
							label: '提成比(%)',
							prop: 'tkTotalRate',
							align: 'center',
							minWidth: 140
						},
						{
							label: '佣金(元)',
							prop: 'pubSharePreFee',
							align: 'center',
							minWidth: 140
						},
						{
							label: '推广位名称',
							prop: 'adzoneName',
							align: 'center',
							emptyText: '无',
							minWidth: 140
						},
						{
							label: '金币',
							prop: 'goldAmount',
							align: 'center',
							minWidth: 140
						}
					],
					op: {
						visible: false
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入商品标题、商品ID、订单编号'
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['slot-layout-top'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params; // 拿到新一轮的全部参数
					const { subData } = await next(params);
					this.$refs['commission-count'].refresh(subData);
				})
				.done();
			if (!(this.params.startTime && this.params.endTime)) {
				this.params = {
					...this.params,
					...dateFormat(0)
				};
			}
			app.refresh({
				...this.params,
				isPromote: 1
				// sort: 'desc',
				// timeType: 0,
				// prop: 'tkCreateTime'
			});
		},
		refresh(params) {
			if (params.startTime) {
				this.params = {
					...params
				};
			}
			if (params.timeType == 0) {
				params.prop = 'tkCreateTime';
			} else if (params.timeType == 1) {
				params.prop = 'tkPaidTime';
			} else if (params.timeType == 2) {
				params.prop = 'tkEarningTime';
			}
			this.crud.refresh(params); // app的refresh()传进去的参数会跟已经存在的参数进行合并
		},
		taobaoIdrefresh(params) {
			if (params.taobaoId) {
				this.selects.positionId = '';
				this.$refs['promotion'].refresh({
					taobaoId: params.taobaoId
				});
			} else {
				this.selects.positionId = '';
				this.$refs['promotion'].refresh({
					taobaoId: ''
				});
			}
			this.refresh({ ...params, positionId: '' });
		},
		openWindow(link) {
			if (this.params.startTime && this.params.endTime) {
				window.open(
					link.href +
						'&startTime=' +
						this.params.startTime +
						'&endTime=' +
						this.params.endTime,
					'_blank'
				);
			} else {
				window.open(link.href, '_blank');
			}
		},
		orderExport() {
			this.$service.order.orderExport(this.params).then(res => {
				download({
					data: res,
					fileName: `订单统计-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		}
	}
};
</script>
<style lang="stylus" scoped>
.crud-index {
    padding 10px
}
.order {
    height 100%
}
.el-icon-copy-document {
	color: #f40;
	margin-left 10px
}
</style>
